<template>
  <div class="app-container">
    <div style="padding-left: 230px; padding-right: 150px">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="商品的基本信息"></el-step>
        <el-step title="添加商品图片"></el-step>
        <el-step title="商品的sku信息"></el-step>
      </el-steps>
    </div>

    <br />
    <!-- 商品基本信息 -->
    <el-row v-show="active == 1">
      <el-col :span="16" :offset="4">
        <el-form ref="form" label-width="120px">
          <el-form-item label="商品标题">
            <el-input v-model="entity.goods.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="商品副标题">
            <el-input v-model="entity.goods.caption"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select
              @change="changelevel1"
              placeholder="请选择一级分类"
              v-model="entity.goods.category1Id"
            >
              <el-option
                v-for="cat in catList1"
                :label="cat.name"
                :value="cat.id"
                :key="cat.id"
              ></el-option>
            </el-select>
            <el-select
            @change="changelevel2"
              placeholder="请选择二级分类"
              v-model="entity.goods.category2Id"
            >
              <el-option
                v-for="cat in catList2"
                :label="cat.name"
                :value="cat.id"
                :key="cat.id"
              ></el-option>
            </el-select>
            <el-select
            @change="changelevel3"
              placeholder="请选择三级分类"
              v-model="entity.goods.category3Id"
            >
              <el-option
                v-for="cat in catList3"
                :label="cat.name"
                :value="cat.id"
                :key="cat.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品模板">
            <el-input v-model="tname" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-select placeholder="请选择品牌" v-model="entity.goods.brandId">
              <el-option
                v-for="brand in brandList"
                :label="brand.name"
                :value="brand.id"
                :key="brand.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商城价">
            <el-input-number
              :precision="2"
              :step="1"
              :max="10000"
              v-model="entity.goods.price"
            ></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="active = 2">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 商品图片 -->
    <el-row v-show="active == 2">
      <el-button
        @click="
          imageDialogVisible = true;
          $refs.goodsImg.clearFiles();
        "
        >添加图片</el-button
      >
      <el-col :span="16" :offset="4">
        <el-table :data="imgsList">
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img height=100px width=100px :src="scope.row" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="removeImg(scope.$index)"
                type="primary"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-button type="primary" @click="active = 1">上一步</el-button>
        <el-button type="primary" @click="active = 3">下一步</el-button>

        <!-- 添加图片dialog -->
        <el-dialog
          title="添加图片"
          :visible.sync="imageDialogVisible"
          :close-on-click-modal="false"
        >
          <el-form ref="brandForm">
            <!-- <el-form-item label="商品图片" prop="logo">
              <el-upload
                action="http://localhost:8888/upload"
                list-type="picture-card"
                name="headImg"
                :on-success="uploadSuccess"
                :limit="1"
                ref="goodsImg"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item> -->
             <el-form-item label="logo(请输入在线地址)">
            <el-input v-model="imgs"></el-input>
          </el-form-item>
          </el-form>
          
          <div slot="footer" class="dialog-footer">
            <el-button @click="imageDialogVisible = false;imgs=''">取 消</el-button>
            <el-button type="primary" v-on:keydown.enter="addIMG()" @click="addIMG()">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>

    <!-- 第三步： sku -->
    <el-row v-show="active == 3">
      <!-- 展示规格面板 -->
      <el-col :span="16" :offset="4">
        <div v-for="(spec, index) in specArr" :key="index">
          <span>{{ spec.specName }} </span>
          <el-checkbox
          v-model="opt.choose"
           @change="genSkuList()"
            :key="index"
            v-for="(opt, index) in spec.options"
            >{{ opt.optionName }}</el-checkbox
          >
        </div>
        <el-table style="width: 100%" border :data="entity.skus">
          <!-- <template v-for="(item,index) in skus">
                <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-show="item.column_name != 'id'"></el-table-column>
            </template> -->

          <el-table-column label="规格">
            <template slot-scope="scope">
              <span>{{
                JSON.stringify(entity.skus[scope.$index].skuSpec)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存">
            <template slot-scope="scope">
              <el-input v-model="entity.skus[scope.$index].skuStock" />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <el-input v-model="entity.skus[scope.$index].skuPrice" />
            </template>
          </el-table-column>
          <el-table-column prop="tc" label="预警库存">
            <template slot-scope="scope">
              <el-input v-model="entity.skus[scope.$index].skuLowStock" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-button type="primary" @click="saveGoods()">保存提交</el-button>
    </el-row>
  </div>
</template>
<script>
import {findbyid} from "@/api/cat"
import {findSpecAndOpts} from "@/api/goods"
import {findAll} from "@/api/Template"
export default {
  data() {
    return {
      imgs:"",
      active: 1,
      imgsList: [],
      imageDialogVisible: false,
      specArr: [], //规格面板的数据
      chooseSpec: [],

      catList1: [],
      catList2: [],
      catList3: [],
      entity: {
        goods: {
          albumPics: "",
          auditStatus: "",
          brandId: "",
          caption: "",
          category1Id: "",
          category2Id: "",
          category3Id: "",
          copyId: "",
          createTime: "",
          defaultSkuId: 0,
          goodsName: "",
          hot: "",
          isDelete: "",
          isEnableSpec: "",
          isMarketable: "",
          price: 0,
          productSn: "",
          sale: 0,
          sellerId: "",
          spuId: "",
          spuSpecInfo: "",
          typeTemplateId: "",
          updateTime: "",
        },
        skus: [
          {skuSpec:{},skuStock:0,skuLowStock:0,skuPrice:0
            // category3Id: "",
            // categoryid: 0,
            // createTime: "",
            // isDefault: "",
            // seller: "",
            // sellerId: "",
            // skuBrand: "",
            // skuId: 0,
            // skuImage: "",
            // skuLowStock: 0,
            // skuMarketPrice: 0,
            // skuPrice: 0,
            // skuSellPoint: "",
            // skuSpec: "",
            // skuStatus: "",
            // skuStock: 0,
            // skuTitle: "",
            // spuId: 0,
            // unit: "",
            // updateTime: "",
          },
        ],
      },
      brandList: [], // 品牌列表
      tname: "",
      imgTmp: "",
    };
  },
  methods: {
    //动态产生sku列表
    genSkuList(){
      this.entity.skus=[{skuSpec:{},skuStock:0,skuLowStock:0,skuPrice:0}];
      this.specArr.forEach(spec=>{
        this.entity.skus =this.addRow(spec.specName,spec.options,this.entity.skus);
      })
    },
    addRow(specNAme,opts,skuList){
      skuList.forEach(sku=>{
        opts.forEach(opt=>{
          if(opt.choose){
          var skutemp = JSON.parse(JSON.stringify(sku));
          skutemp.skuSpec[specNAme] = opt.optionName;
          skuList.push(skutemp);}
        })
      })
      return skuList;
    },
    // 查询二级分类
      changelevel1(id){
        this.tname="";
        this.entity.goods.category2Id="";
        this.entity.goods.category3Id= "";
        this.findbycat(id,2);
      },
      // 查询三级分类
      changelevel2(id){
        this.tname="";
        this.entity.goods.category3Id= "";
        this.findbycat(id,3);
      },
      //获取模板id
      changelevel3(id){
        this.catList3.forEach(cat=>{
          console.log(cat);
          if(cat.id==id){
            this.entity.goods.typeTemplateId=cat.id;
            this.tname=cat.tname;
            this.brandList=JSON.parse(cat.brands);
            //获取规格及规格选项信息
            findSpecAndOpts(cat.id).then(res=>{
              console.log(res);
              console.log(132132);
              this.specArr =res;
            })
          }
        })
      },
      findbycat(pid,level){
        findbyid(pid).then(res=>{
            if(level==1){
                this.catList1=res;
            }
            if(level==2){
                this.catList2=res;
            }
            if(level==3){
                this.catList3=res;
            }
            
        })
      
      },
      //添加图片
      addIMG(){
        this.imgsList.push(this.imgs);
        this.imageDialogVisible=false;
        this.imgs="";
      },
      //删除图片
      removeImg(index){
        this.imgsList.splice(index,1);

      },
  },
  created() {
      // findAll().then(res=>{
      //   console.log(res);
      // })
      this.findbycat(0,1);
      
  },
};
</script>